<template>
  <el-form
    class="msui-form"
    ref="form"
    :model="options.formModel"
    :disabled="options.disabled"
    :size="options.size"
    :labelPosition="options.labelPosition"
    :label-width="options.labelWidth"
    :inline="options.inline"
  >
    <el-row type="flex" style="flex-wrap: wrap">
      <template v-for="(item, key) in options.formModel">
        <!-- 表单查看 -->
        <el-col v-if="options.onlyLook == true" :key="key" :span="item.getSpan() || options.span">
          <el-form-item
            :style="options.style"
            :class="options.class"
            :prop="key + '.value'"
            :rules="item.rules"
            :label="item.label + ':'"
          >
            <!-- 插槽使用 -->
            <slot :style="item.style" v-if="$scopedSlots[key]" :name="key" :item="item" :keys="key" />
            <!-- 默认使用 -->
            <MsuiSpan v-else :style="item.style" v-model.trim="item.value" :ref="key" :attrs="item.getAttrs()" />
          </el-form-item>
        </el-col>
        <!-- 表单查看 -->
        <!-- 普通表格 -->
        <el-col v-else-if="!options.inline && item.show" :span="item.getSpan() || options.span" :key="key + 1">
          <el-form-item
            :class="options.class"
            :style="options.style"
            :prop="key + '.value'"
            :rules="item.rules"
            :label="item.label"
            :title="item.render() == 'elInput' ? item.value : ''"
            :label-width="item.labelWidth ? item.labelWidth : options.labelWidth"
          >
            <!-- 插槽使用 -->
            <slot v-if="$scopedSlots[key]" :name="key" :item="item" :keys="key" />
            <!-- 默认使用 -->
            <component
              v-else
              :style="item.style"
              v-model.trim="item.value"
              v-on="item.getFn()"
              v-bind="item.getBind()"
              :ref="key"
              :is="item.render()"
              :attrs="item.getAttrs()"
            />
          </el-form-item>
        </el-col>

        <!-- 表格inline使用 -->
        <el-form-item
          :style="options.style"
          :class="options.class"
          v-else-if="options.inline && item.show"
          :key="key + 'n'"
          :prop="key + '.value'"
          :rules="item.rules"
          :label="item.label"
        >
          <!-- 插槽使用 -->
          <slot v-if="$scopedSlots[key]" :name="key" :item="item" :keys="key" />
          <!-- 默认使用 -->
          <component
            v-else
            v-model.trim="item.value"
            v-on="item.getFn()"
            v-bind="item.getBind()"
            :ref="key"
            :is="item.render()"
            :attrs="item.getAttrs()"
          />
        </el-form-item>
      </template>
    </el-row>

    <!-- 保存按钮设置 -->
    <slot v-if="$scopedSlots['save']" name="save" :formModel="options.formModel" :options="options"></slot>
    <el-col
      v-else-if="!$scopedSlots['save'] && showButton"
      :span="24"
      :style="{ textAlign: options?.saveSettings?.position || 'left' }"
    >
      <el-form-item :style="options.style">
        <el-button @click="submitForm" :loading="options.loading || false" type="primary">{{
          options?.saveSettings?.but1 || '保存'
        }}</el-button>
        <el-button @click="resetForm">{{ options?.saveSettings?.but2 || '重置' }}</el-button>
      </el-form-item>
    </el-col>
  </el-form>
</template>

<script>
export default {
  name: 'MsuiForm',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    showButton() {
      if (this.options.showButton) {
        return true
      } else if (this.options.showButton === false) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    validateField(data) {
      data = data.map((item) => item + '.value')
      this.$refs.form.validateField(data)
    },
    //   保存表单
    submitForm() {
      return this.$refs.form.validate().then((res) => {
        if (res) {
          const formModel = this.options.formModel
          const formData = {}
          for (let key in formModel) {
            formData[key] = formModel[key].value
          }
          // 执行保存逻辑，向外抛出表单数据
          this.$emit('saveForm', formData)
          if (this.options.save instanceof Function) {
            this.options.save(formData)
          }
          return formData
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs.form.resetFields()
      if (this.options.reset instanceof Function) {
        this.options.reset()
      }
    }
  }
}
</script>
<style>
.msui-form {
  display: block;
  overflow: hidden;
}
</style>
